﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>PYXZSKSZX.JKY</title>
    <link rel="stylesheet" href="../assets/css/cropper.css">
    <link href="../lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        .hh {
            hidden:hidden
        }
    </style>
</head>

<body>
    <div class="page-wrapper container-xl">
        <div class="row row-cards">
            <h4>　</h4>
            @*  @ViewBag.TraceIdentifier*@
            <h4>濮阳县教育考试中心【监考员登记】</h4>
    
             <H5 style="color:darkblue">考试名称：@ViewBag.ksmc</H5>
                     <h4>　</h4>
            <form>
                @if (ViewBag.gzdw.Length > 0)
                {
                    <div class="mb-3">
                        <label class="form-label">工作单位</label>
                        <input disabled type="text" class="form-control" id="GZDW" name="GZDW" placeholder="请输入你的工作单位" value="@ViewBag.gzdw">
                    </div>
                }
                else
                {
                    <div class="mb-3">
                        <label class="form-label">工作单位</label>
                        <input type="text" class="form-control" id="GZDW" name="GZDW" placeholder="请输入你的工作单位" value="">
                    </div>

                }
                <p hidden="hidden" style=" color:red">备注：本次考务费用按要求将直接发放到本人银行卡，请认真填写信息。</p>
                <div hidden="hidden" class="mb-3">
                    <label class="form-label">TraceIdentifier</label>
                    <input type="text" class="form-control" id="TraceIdentifier" name="TraceIdentifier" value="@ViewBag.TraceIdentifier">
                </div>
                <div class="mb-3">
                    <label class="form-label">姓名</label>
                    <input type="text" class="form-control" id="XM" name="XM" placeholder="请输入姓名" value="@ViewBag.xm">
                </div>
                <div class="mb-3">
                    <label class="form-label">手机号</label>
                    <input type="text" class="form-control" id="SJH" name="SJH" placeholder="请输入11位手机号" value="@ViewBag.sjh">
                </div>
                <div class="mb-3">
                    <label class="form-label">身份证号</label>
                    <input type="text" class="form-control" id="SFZ" name="SFZ" placeholder="请输入18位身份证号" value="@ViewBag.sfz">
                </div>
                <div class="mb-3" hidden="hidden">
                    <label class="form-label">开户行</label>
                    <input type="text" class="form-control" id="KHH" name="KHH" placeholder="请输入开户行" value="@ViewBag.khh">
                </div>
                <div class="mb-3" hidden="hidden">
                    <label class="form-label">银行卡号</label>
                    <input type="text" class="form-control" id="YHKH" name="YHKH" placeholder="请输入银行卡号" value="@ViewBag.yhkh">
                </div>
                <p hidden="hidden" style=" color:red">备注：本次考务费用按要求将直接发放到本人银行卡，请认真填写信息。</p>
                @*   <button type="button" onclick="saveinfo()" class="btn btn-primary">保存</button>*@
            </form>
            @{
                string xmsfz = "";
                if (ViewBag.xm != null && ViewBag.sfz != null) xmsfz = ViewBag.xm.Trim() + ViewBag.sfz.Trim();
                if (xmsfz.Length > 0)
                {
                    <div id="showpic">

                        <button onclick="ShowEdit()">修改照片和信息</button>
                        <img width="300px" height="400px" src="../jky/GetPic?xmsfz=@xmsfz" id="imgb" alt="照片" height="100%">

                    </div>
                    <div id="uppic" hidden="hidden">
                        <a name="chooseFile"></a>
                        <br /><a href="#chooseFile">
                            <button class="tan-up-btn" id="choose">选择要上传的文件</button>
                        </a>


                        <div class="tan-show-option">
                            <div class="container">
                                <img src="" alt="" id="image">
                            </div>
                            <div class="preview previewImg">
                                <img src="" id="imga" alt="" height="100%">
                            </div>
                            <button style="height:90px " class="btn btn-primary btn-pill upload" id="CutImgEvent">保存信息并上传图片</button>
                            <input type="file" id="imgfile" accept="image/jpg,image/jpeg,image/png">
                        </div>
                    </div>
                }
                else
                {
                    <div id="uppic">
                        <a name="chooseFile"></a>
                        <br /><a href="#chooseFile"><button class="tan-up-btn" id="choose">选择要上传的文件</button></a>


                        <div class="tan-show-option">
                            <div class="container">
                                <img src="" alt="" id="image">
                            </div>
                            <div class="preview previewImg">
                                <img src="" id="imga" alt="" height="100%">
                            </div>
                            <button style="height:90px " class="btn btn-primary btn-pill upload" id="CutImgEvent">保存信息并上传图片</button>
                            <input type="file" id="imgfile" accept="image/jpg,image/jpeg,image/png">
                        </div>
                    </div>
                }
            }
            <script src="assets/js/jquery-2.1.1.js"></script>
            <script src="assets/js/cropper.min.js"></script>
            <script>
                function ShowEdit() {
                    $("#showpic").hide();
                    var uppic = document.getElementById("uppic");
                    uppic.hidden = "";
                }

                $("#choose").click(function() {
                    $("#imgfile").click();
                    // alert("ggg");
                })


                var image = document.getElementById('image');
                var cropper, canvas;
                $('#imgfile').change(function(e) {
                    var file;
                    var files = e.target.files;
                    if (files && files.length > 0) {
                        file = URL.createObjectURL(files[0]);
                        $('#image').attr({ 'src': file })
                    }
                    if (cropper != undefined) {
                        cropper.destroy()
                    }
                    cropper = new Cropper(image, {
                        aspectRatio: 3 / 4,
                        background: true,  //是否显示网格背景
                        zoomable: true,   //是否允许放大图像
                        guides: true,   //是否显示裁剪框虚线
                        crop: function(event) { //剪裁框发生变化执行的函数。
                            canvas = cropper.getCroppedCanvas({  //使用canvas绘制一个宽和高200的图片
                                width: 600,
                                height: 800,
                            });
                            $('#imga').attr("src", canvas.toDataURL("image/png", 0.3))  //使用canvas toDataURL方法把图片转换为base64格式
                        }
                    });
                })
                $("#CutImgEvent").click(function() {
                    var gzdw = $("#GZDW").val();
                    var xm = $("#XM").val();
                    var sjh = $("#SJH").val();
                    var sfz = $("#SFZ").val();
                    var khh = $("#KHH").val();
                    var yhkh = $("#YHKH").val();
                    var traceIdentifier = $("#TraceIdentifier").val();
                    //var sfzh = $("#sfzh").val();
                    //var lxdh= $("#lxdh").val();
                    console.log($("#imga").attr("src"))

                    var formData = new FormData($("#registerForm")[0]);
                    formData.append("imgBase64", encodeURIComponent($("#imga").attr("src")));
                    formData.append("sfz", sfz);
                    formData.append("xm", xm);
                    formData.append("sjh", sjh);
                    formData.append("gzdw", gzdw);
                    formData.append("yhkh", yhkh);
                    formData.append("khh", khh);
                    formData.append("traceIdentifier", traceIdentifier);
                    $.ajax({
                        url: "jky/savejky",
                        type: 'POST',
                        data: formData,
                        timeout: 10000,
                        async: true,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(result) {
                            alert(result)
                        },
                        error: function(returndata) {
                            Alert.closedLoading()
                        }
                    })
                })

            </script>
        </div>
    </div>
</body>

</html>
